<template>
  <div class="edit_user_msg">
    <el-dialog
      title="编辑"
      v-model="editShow"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="form"
        ref="form"
        label-width="auto"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名:" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="证书编号:" prop="certNum">
          <el-input v-model="form.certNum"></el-input>
        </el-form-item>
        <el-form-item label="分会部门:" prop="dept">
          <el-input v-model="form.dept"></el-input>
        </el-form-item>
        <el-form-item label="专业:" prop="job">
          <el-input v-model="form.job"></el-input>
        </el-form-item>
        <el-form-item label="证书发证日期:" prop="certTime">
          <el-input v-model="form.certTime"></el-input>
          <!-- <el-date-picker
            v-model="form.certTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker> -->
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" value="男"> </el-option>
            <el-option label="女" value="女"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editShow = false">取 消</el-button>
          <el-button type="primary" @click="handEdit">提 交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getCertByID, handEditMsg } from "@/utils/apis";

export default {
  props: {
    id: {
      type: Number,
    },
  },
  watch: {
    async id(newVal) {
      const details = (await getCertByID({ id: newVal })).data;
      this.form = details;
    },
  },
  data() {
    return {
      editShow: false,
      form: {},
      rules: {
        certTime: [
          {
            required: true,
            message: "请填写时间",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
        dept: [
          {
            required: true,
            message: "请输入分发部分",
            trigger: "blur",
          },
        ],
        job: [
          {
            required: true,
            message: "请输入专业",
            trigger: "blur",
          },
        ],
        certNum: [
          {
            required: true,
            message: "请输入证书编号",
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          handEditMsg(this.form).then((res) => {
            delete this.form.handImg;
            delete this.form.passWord;
            delete this.form.idCard;
            this.editShow = false;
            this.$parent.init();
          });
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.editShow = false;
    },
  },
};
</script>
<style  lang="scss" scope>
.edit_user_msg {
}
</style>
